<!-- 表格组件 -->
<script setup lang="ts">
import { computed, ref, type PropType } from 'vue'
import MuiTableColumn from './DuiTableColumn.vue'
import { type ElPagination, ElTable } from 'element-plus'
import type { IMyPick, IMySearch, IMyTableColumn } from '@/types/global'

const emits = defineEmits(['search'])

const props = defineProps({
  // 数据列表
  data: {
    type: Array as PropType<any[]>,
    default() {
      return [] as any[]
    }
  },
  // 表头及对应字段
  columns: {
    type: Array as PropType<IMyTableColumn[]>,
    default() {
      return [] as IMyTableColumn[]
    }
  },
  // 分页数据总数
  total: {
    type: Number,
    default: 0
  },
  // 搜索条件
  search: {
    type: Object as PropType<IMySearch>,
    default() {
      return {} as IMySearch
    }
  },
  // 是否有分页
  isPagination: {
    type: Boolean,
    default: true
  },
  // 每行的id标识字段
  rowKey: {
    type: String,
    default: 'id'
  },
  // 分页的每页数量列表
  pageSizes: {
    type: Array as PropType<number[]>,
    default() {
      return [5, 10, 20, 30, 50]
    }
  },
  // 选中的列表
  pickList: {
    type: Array as PropType<IMyPick[]>,
    default() {
      return [] as IMyPick[]
    }
  }
})

const tableRef = ref<InstanceType<typeof ElTable>>()

/**
 * 页码变化事件
 */
function pageChangeEvt() {
  emits('search')
}

/**
 * 树形表格-指定数组全部展开/折叠
 */
function setAllRowExpansion(list: any[], isExpand: boolean) {
  list.forEach((item) => {
    tableRef.value?.toggleRowExpansion(item, isExpand)
    if (item.children && item.children.length > 0) {
      setAllRowExpansion(item.children, isExpand)
    }
  })
}

const setTableStyle = computed(() => {
  return `height: calc(100% - ${props.isPagination ? 40 : 0}px)` as any
})

defineExpose({
  setAllRowExpansion
})
</script>

<template>
  <div ref="tableBox" class="dui-table-bg">
    <ElTable
      ref="tableRef"
      :style="setTableStyle"
      :header-cell-style="{ background: '#f5f7fb', fontSize: '14px', fontWeight: 'bold', color: '#252631' }"
      :border="true"
      :scrollbar-always-on="true"
      :data="data"
      size="default"
      :row-key="rowKey"
      v-bind="$attrs"
    >
      <template v-for="item in columns" :key="item.prop">
        <MuiTableColumn :item="item" :pick-list="pickList" :data="data" v-if="!item.hide">
          <!-- 表格内容 -->
          <template v-for="(index, name) in $slots" #[name]="{ row, column, $index }">
            <slot :$index="$index" :column="column" :name="name" :row="row"></slot>
          </template>
        </MuiTableColumn>
      </template>
    </ElTable>
    <div v-if="isPagination" class="dui-table-page-box">
      <ElPagination
        v-model:current-page="search.pageNum"
        v-model:page-size="search.pageSize"
        :page-sizes="pageSizes"
        layout="total, prev, pager, next, sizes"
        :total="total"
        @size-change="pageChangeEvt"
        @current-change="pageChangeEvt"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.dui-table-bg {
  height: 100%;
  overflow: hidden;
  .dui-table-page-box {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
